"use client";

import Modal from "./Modal";
import { useSupabaseClient, useSessionContext } from "@supabase/auth-helpers-react";
import { useRouter } from "next/navigation";
import { Auth } from '@supabase/auth-ui-react';
import { ThemeSupa } from '@supabase/auth-ui-shared';
import useAuthModal from '@/hooks/useAuthModal';
import { useEffect } from "react";

const AuthModal = () => {
  //Next.js Auth Helpers 包将 Supabase Auth 配置为将用户的存储session在cookie，
  //而不是localStorage. 这使得它可以跨 App Router 的客户端和服务器使用 
  //-客户端组件、服务器组件、服务器操作、路由处理程序和中间件。
  //该信息session会与任何请求一起自动发送至 Supabase。
  //获取supabase客户端信息
  const supabaseClient = useSupabaseClient();
  const router = useRouter();
  const { session } = useSessionContext();
  //使用zustand管理的onClose, isOpen方法
  const { onClose, isOpen } = useAuthModal();

  useEffect(() => {
    //已经登录时
    if (session) {
      router.refresh();
      onClose();
    }
  }, [session, router, onClose]);

  const onChange = (open: boolean) => {
    if(!open){
      onClose();
    }
  }

  return (
    //渲染模态框组件 自定义标题和表单内容
    <Modal
      title="Welcome back"
      description="Login to your account."
      isOpen={isOpen}
      onChange={onChange}
    >
      {/* 渲染Auth组件，该组件已经封装好的UI，包含了各种登录方式或邮件账户密码登录的表单 */}
      <Auth 
        theme="dark"
        providers={['google', 'github']}
        magicLink //邮件链接
        supabaseClient={supabaseClient}
        appearance={{
          theme: ThemeSupa,
          variables: {
            default: {
              colors: {
                brand: '#404040', //更改了按钮的背景颜色
                brandAccent: '#22c55e'
              }
            }
          }
        }}
      />
    </Modal>
  )
}

export default AuthModal;